<template>
  <div class="my-container">
    <div class="bg" v-if='$store.state.flag'>
      <img src="../../assets/banner.png" alt="" />
      <div class="mobile">
        <img src="../../assets/mobile.png" alt="" />
        <div><span @click="realLogin">登录</span><span > / </span><span >注册</span></div>
        
      </div>
    </div>
    <div class="bg" v-else>
      <img src="../../assets/banner.png" alt="" />
      <div class="info1">
        <div class="info-left">
          <div class="touxiang">
           
            <img  :src="userInfo.photo" alt="">
            <!-- <img src="@/assets/touxiang.jpg" alt=""> -->
            <span>{{userInfo.name}}</span>
          </div>
        </div>
        <van-button round size="mini" class="info-right" @click="$router.push('/user/profile')">编辑资料</van-button>
      </div>
      <div class="info2">
        <van-grid :border="false">
          <van-grid-item>
            <div slot="text">{{userInfo.art_count}}</div>
            <div slot="text">头条</div>
          </van-grid-item>
          <van-grid-item text="关注">
            <div slot="text">{{userInfo.like_count}}</div>
            <div slot="text">关注</div>
          </van-grid-item>
          <van-grid-item text="粉丝">
            <div slot="text">{{userInfo.follow_count}}</div>
            <div slot="text">粉丝</div>
          </van-grid-item>
          <van-grid-item text="获赞">
            <div slot="text">{{userInfo.fans_count}}</div>
            <div slot="text">获赞</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <div class="nav1" :border="false">
      <van-grid clickable :column-num="2">
        <van-grid-item icon="star-o" text="收藏" style="color: red" />
        <van-grid-item icon="clock-o" text="历史" style="color: red"/>
      </van-grid>
    </div>

    <div class="nav2">
      <van-cell is-link @click="showPopupNote">消息通知</van-cell>
      <van-popup v-model="showNote" position="top" :style="{ height: '70%' }"
        >好多消息</van-popup
      >
      <van-cell is-link @click="showPopup">小智同学</van-cell>
      <van-popup v-model="show" position="top" :style="{ height: '30%' }"
        >小智同学</van-popup
      >
    </div>

    <div class="logout">
      <van-button block @click="logout"  style="color:red" v-if="!$store.state.flag">退出登录</van-button>
    </div>
  </div>
</template>

<script>


import {getUserInfo} from '@/api/user'

export default {
  data() {
    return {
      showNote : false,
      show: false,
      logoutShow: false,

      userInfo : {}
    }
  },
  methods: {
    showPopup() {
      this.show = true
    },
    showPopupNote(){
       this.showNote = true
    },
    logout() {
      this.logoutShow = true
      this.$dialog.confirm({
       message: '确认退出吗？',
      })
      .then(() => {
          // on confirm

            this.$store.commit('change')
             this.$store.commit('removeUser')
      })
      .catch(() => {
          // on cancel
           console.log('取消退出');
      })
    },
    realLogin(){
       this.$router.push('/login')
    },
     async  getUser (){
      try {
        var {data} = await getUserInfo()

        console.log(data);
        

          this.userInfo  = data.data
        
      }
      catch(err){
        console.log(err);
        
      }
    }
  },
  mounted(){
    if(this.$store.state.userToken){
       this.getUser()
    }
   
  }
}
</script>

<style scoped lang='less'>
.my-container {
  .bg {
    position: relative;
    > img {
      width: 100%;
    }
    .mobile {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      justify-items: center;
      align-items: center;
      img {
        width: 120px;
        margin-bottom: 10px;
      }
      span {
        font-size: 24px;
        color: #fff;
      }
    }
    .info1 {
      box-sizing: border-box;
      position: absolute;
      top: 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0 30px;
      .info-left {
        img {
          display: inlne-block;
          width: 160px;
          height: 160px;
          border: 3px solid #fff;
          border-radius: 50%;
        }
        span {
          font-size: 18px;
          color: #fff;
          margin: 0 20px;
        }
      }
    }
    .info2 {
      position: absolute;
      bottom: 0;
      width: 100%;

      /deep/.van-grid-item__content--center {
        background-color: rgba(0, 0, 0, 0);
        color: #fff;
        font-size: 18px;
        div {
          margin: 10px 0;
        }
      }
    }
  }
  .nav1 {
    margin-bottom: 10px;
  }
  .logout {
    margin: 10px 0;
  }
}
</style>